<template>
  <div class="shiList">
    <div class="shiTable">
      <div   class="vectortable">
        <!--<el-table
          :data="theTextAchievementsInfos"
          border
          mini
          :stripe="true"
          style="width: 100%"
          height="100%"
          center
        >
          <el-table-column
            fixed
            prop="ID"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="fileName"
            label="矢量文件"
            width="300">
          </el-table-column>
          <el-table-column
            prop="listing"
            label="成果清单"
            width="280">
          </el-table-column>
          <el-table-column
            prop="evidence"
            :show-overflow-tooltip="true"
            header-align="evidence"
            label="佐证材料"
            width="240">
          </el-table-column>
          <el-table-column
            prop="uploadDate2"
            label="系统审核时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="verifyContent"
            label="系统审核状态"
            width="130">
          </el-table-column>
          <el-table-column
            prop="isApproved2"
            label="当前待审核状态"
            width="130">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
                          <template slot-scope="scope">
                            <el-tooltip effect="light" content="审核矢量文件及佐证材料" placement="top" :enterable="false">
                              <el-button @click="handleReview(scope.row)" type="primary" size="mini" v-has="'rengong'"><i class="el-icon-view"></i></el-button>
                            </el-tooltip>
                          </template>
          </el-table-column>
        </el-table>-->
        <el-table
          :data="theTextAchievementsInfos"
          border
          mini
          :stripe="true"
          style="width: 100%"
          height="100%"
          center
        >
          <el-table-column
            fixed
            prop="ID"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="reportUnit"
            label="上报单位"
            width="300">
          </el-table-column>
          <el-table-column
            prop="reportUser"
            label="上报人"
            width="280">
          </el-table-column>
          <el-table-column
            prop="evidence"
            :show-overflow-tooltip="true"
            header-align="evidence"
            label="佐证材料"
            width="240">
          </el-table-column>
          <el-table-column
            prop="uploadDate2"
            label="系统审核时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="verifyContent"
            label="系统审核状态"
            width="130">
          </el-table-column>
          <el-table-column
            prop="isApproved2"
            label="当前待审核状态"
            width="130">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-tooltip effect="light" content="审核矢量文件及佐证材料" placement="top" :enterable="false">
                <el-button @click="handleReview(scope.row)" type="primary" size="mini" v-has="'rengong'"><i class="el-icon-view"></i></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[15,20,30,50]"
            :page-size="15"
            layout="total, sizes, prev, pager, next, jumper"
            :total=theTextAchievementsInfosTotal>
          </el-pagination>
        </div>
      </div>

      <el-dialog
        title="矢量数据审核"
        :visible.sync="dialogVisible"
        width="25%"
        :close-on-click-modal=false
        center
        @close='quxiao'
        :destroy-on-close="true"
      >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <el-form-item label="是否审核通过" prop="isApproved">
            <el-select size="medium" v-model="ruleForm.isApproved" placeholder="请选择是否审核通过">
              <el-option v-for="(itme,index) in options" v-bind:key="index" :label="itme.label" v-bind:value="itme.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核结果说明" prop="verifyContent">
            <el-input type="textarea" v-model="ruleForm.verifyContent"></el-input>
          </el-form-item>
          <el-form-item label="佐证材料" >
            <el-link title="点击下载" v-for="(item,index) in fileLinks" style="display: block"  :key="index"  :underline="false" :href="item.filepath" target="view_window" type="info">
              {{item.filename}}</el-link>
          </el-form-item>
          <el-form-item>
            <el-button type="goon" round size="medium" @click="submitForm('ruleForm')">提 交</el-button>
            <el-button type="goon" round size="medium" @click="resetForm('ruleForm')">重 置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapGetters} = createNamespacedHelpers('dirmanage')

export default {
  name: 'TheReview',
  data() {
    return {
      options: [{
        value: 0,
        label: '审核不通过'
      }, {
        value: 1,
        label: '审核通过',
      }],
      value:"",
      dialogVisible: false,
      currentPage1: 1,
      fileLinks:[],
      activeIndex: '1',
      activeIndex2: '1',
      requestParams:{
        pageNumber:1,
        pageSize:15,
        isApproved:2,
      },
      ruleForm: {
        isApproved: '',
        verifyContent: '',
        achievementTempId:''
      },
      rules: {
        isApproved: [
          { required: true, message: '请选择是否审核通过', trigger: 'change' }
        ],
        verifyContent: [
          { required: true, message: '请填写审核结果说明', trigger: 'blur' }
        ]
      }
    };
  },
  created () {

  },
  mounted() {
    this.$store.dispatch('dirmanage/getDivisionAchievementsVerifying',this.requestParams)
  },
  methods:{
   async submitForm(formName) {
       this.$refs[formName].validate( async (valid) => {
        if (valid) {
          await this.$http.post('/v1.0/resultIntegration/achievements/achievementsUniversal/verify/manualVerify/' + this.ruleForm.isApproved + '/' + this.ruleForm.verifyContent
            + '/'+ this.ruleForm.achievementTempId).then(
            response =>{
              console.log(response)
            }
          )

           // await this.$store.dispatch('dirmanage/manualVerify',this.ruleForm)
           this.$store.dispatch('dirmanage/getDivisionAchievementsVerifying',this.requestParams)
           this.dialogVisible = false
           this.$message.success('审核完成')
        } else {
          this.$message.error('请填写表单要求必填字段')
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleReview(row){
       var fileLink = []
       // var filename = {}
       var specificList = ['xls','xlsx','cpg','shp','shx','prj','dbf']
       var fileList = row.files
       for(var i =0;i<fileList.length;i++){
          var filename = {}
          if (specificList.indexOf(fileList[i].fileType)===-1){
            filename['filename'] = fileList[i].fileName
            // filename['filepath'] = "http://localhost:8803/"+ fileList[i].filePath
            // filename['filepath'] = "http://10.16.11.240:15480/"+ fileList[i].filePath
           filename['filepath'] = "https://10.226.77.11/fils"+ fileList[i].filePath 
         //    filename['filepath'] = "http://59.223.239.59:8803/"+ fileList[i].filePath
            //    filename['filepath'] = "http://10.222.77.11:8803/"+ fileList[i].filePath
            fileLink.push(filename)
          }
          else{
            fileLink = []
          }
       }
       this.fileLinks = fileLink
       console.log(this.fileLinks)
       this.ruleForm.achievementTempId = row.id
       this.dialogVisible = true
    },
    handleSizeChange(val) {
      this.requestParams.pageSize = val
      this.$store.dispatch('dirmanage/getDivisionAchievementsVerifying',this.requestParams)
    },
    handleCurrentChange(val) {
      this.requestParams.pageNumber = val
      this.$store.dispatch('dirmanage/getDivisionAchievementsVerifying',this.requestParams)
    },
    handleChange(node,data){
      console.log(node,data)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    quxiao(){
      this.dialogVisible = false
    },
    tijiao(){
       console.log(this.ruleForm)
    }
  },
  computed:{
    ...mapGetters(['theTextAchievementsInfos']),
    ...mapGetters(['theTextAchievementsInfosTotal'])
  },
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__content{
  margin-left: 120px !important;
}
::v-deep  .el-form-item__label{
  width: 120px !important;
}
::v-deep .el-textarea__inner{
  margin-top: 10px;
  width: 85%;
}
::v-deep .el-table td{
  padding: 13px 0 ;
}
.vectortable{
  position: absolute;
  //top: 6%;
  width: 98%;
  padding: 1%;
  /*height: 100%;*/
  //overflow: hidden;
  height: calc(100% - 6.5%);
}
.shiList{
  position: absolute;
  left: 15.5%;
  //height: 87%;
  top: 9.5%;
  bottom: 1.5%;
  width: 83.5%;
  /*background-color: #ffffff;*/
  border-radius: 8px;
  /*border: 1px red solid;*/
}
#topAside{
  position: absolute;
  width: 100%;
  //height:56px;
  top: 1%;
  text-align: center;
  /*background-color: #545c64;*/
  border-radius: 8px 0;
}
::v-deep ul{list-style:none;display:inline-block;}
::v-deep .el-menu-item{
  font-size: 16px;
  padding:0 40px
}
::v-deep .el-menu--horizontal>.el-menu-item{
  height: 56px;
}
.shiTable{
  position: absolute;
  //top: 6%;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  //padding: 1%;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;

}
/*.demo-input-suffix{*/
/*  !*height: 60px;*!*/
/*  padding: 10px;*/
/*}*/
.searchBar{
  display: inline-block;
  position: absolute;
  width: 98%;
  /*padding: 10px;*/
  background-color: #ffffff;
  padding: 1%;
  border-radius: 8px;
}
.el-input{
  width: 12%!important;
}
.searchBar > span{
  /*padding: 10px;*/
  font-size: 14px;
}
.margin_left{
  margin-left: 55%;
  margin-right: 20px;
}
span{
  color: #203f6e;
  font-size: 14px;
}

::v-deep .el-button--goon:focus, .el-button--goon:hover {
  color: #fff;
  border-color: #25e4a3;
  background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
}
::v-deep .el-button--goon:active {
  color: #fff;
  border-color: #25e4a3;
  outline: 0;
}

#topAside {
  ::v-deep .el-button{
    width: 15%;
    font-size: 14px;
    //color: #a5b1ad;
    box-shadow: 0 0 2px #acc4fe;
  }
  ::v-deep .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
}

::v-deep .el-input__inner{
  //border-radius: 45px;
}

::v-deep .el-dialog__title{
  font-weight: bold;
  font-size: 20px;
  color: #45524f;
}
.el-dialog__body{
  .el-form{
    .el-form-item {
      .el-form-item__content{
        .el-input{
          ::v-deep  .el-input__inner{
            border-radius: 45px;
          }
        }

      }
    }
  }
}
::v-deep .el-select .el-input__inner{
  border-radius: 45px;
}
//::v-deep .el-dialog__headerbtn .el-dialog__close{
//  display: none;
//}
::v-deep .el-form-item__content{
  ::v-deep  .el-input__inner{
    border-radius: 45px;
  }
}
::v-deep .el-dialog__header {
  //background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);
  padding: 10px;
  border-radius: 8px 8px 0 0 ;
}
::v-deep .el-dialog{
  border-radius: 8px;
  ul{
    display: block;
  }
}

::v-deep .el-message-box__btns{
  ::v-deep .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
}
::v-deep .el-dialog__headerbtn{
  top: 13px;
}
::v-deep .cell{
  text-align: center;
}
::v-deep .el-table__body-wrapper {
  /*height: 200px; !* 滚动条整体高 必须项 *!*/
  border-right: none;
  overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
}
::v-deep .el-dialog--center .el-dialog__body{
  padding: 10px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width:6px;/* 滚动条的宽高 必须项 */
  height: 5px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #bfcbd9;/* 滚动条的宽 */
  border-radius: 3px;
}
</style>
